<template>
  <el-dialog
    width="50%"
    ref="setRolesRef"
    title="分配角色"
    :visible.sync="setRelosDialogVisible"
    :before-close="handleClose">
    <div>
        <el-alert
            v-if = "userInfo.role_name === '超级管理员'"
            show-icon
            title = "不允许修改admin账户"
            type = "error">
        </el-alert>
        <p>当前用户: {{ userInfo.username }}</p>
        <p>当前角色: {{ userInfo.role_name }}</p>
        <p>分配新角色:
            <el-select v-model = "selectedRoleId"
                       placeholder = "请选择">
                <el-option
                    v-for = "item in rolesList"
                    :key = "item.id"
                    :label = "item.roleName"
                    :value = "item.id">
          </el-option>
        </el-select>
      </p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="setRelosDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
export default {
  name: 'VueShopSetRole',
  props:{
    // 用户信息
    userInfo:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    // 所有角色列表
    rolesList:{
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  data() {
    return {
      setRelosDialogVisible:false,
      // 已选中的角色id值
      selectedRoleId: "",
    };
  },
  methods: {
    /**
     * @点击按钮，分配角色
     */
    async saveRoleInfo(){
      if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色');
      }
      const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{
        rid: this.selectedRoleId
      });
      console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
      }
      this.$message.success('更新新角色成功');
      this.$emit('getUserList');
      this.setRelosDialogVisible = false;
    },
    /**
     * @监听对话框事件
     */
     handleClose(){
      this.setRelosDialogVisible = false;
      this.selectedRoleId = '';
      this.$emit('clearUserInfo');
    }
  },
};
</script>

<style lang="less" scoped>

</style>
